<template>
  <div class="widget-form-container">
    <el-form :label-position="data.labelPosition || 'left'"
             :label-width="data.labelWidth ? `${data.labelWidth}px` : '100px' "
             :label-suffix="data.labelSuffix"
             v-model="form"
             ref="widgetForm"
             size="small">
      <el-row :gutter="data.gutter">
        <div class="widget-form-list">
          <template v-for="(column, index) in data.column">
            <el-col class="widget-form-table"
                 v-if="column.type == 'dynamic'"
                 :key="index"
                 :md="item.span || 12"
                  :xs="24"
                  :offset="item.offset || 0"
                 :class="{ active: selectWidget.prop == column.prop }"
                 @click="handleSelectWidget(index)">
              <widget-form-table :data="data"
                                 :column="column"
                                 :index="index"
                                 :select.sync="selectWidget"
                                 @change="$emit('change')"></widget-form-table>
            </el-col>
            <div class="widget-form-group"
                :style="{ height: column.height || '52px' }"
                 v-else-if="column.type == 'group'"
                 :key="index"
                 :class="{ active: selectWidget.prop == column.prop }"
                 @click="handleSelectWidget(index)">
              <widget-form-group :data="data"
                                 :column="column"
                                 :index="index"
                                 :select.sync="selectWidget"
                                 @change="$emit('change')">
              </widget-form-group>
            </div>
            <el-col v-else
                    :style="{ height: column.height || '52px' }"
                    :key="index"
                    :md="column.span || 12"
                    :xs="24"
                    :offset="column.offset || 0">
              <el-form-item class="widget-form-item"
                            :label="column.label"
                            :labelWidth="column.labelWidth"
                            :prop="column.prop"
                            :class="{ active: selectWidget.prop == column.prop, 'required': column.required }"
                            @click.native="handleSelectWidget(index)">
                <widget-form-item :item="column"
                                  :params="column.params"></widget-form-item>
              </el-form-item>
            </el-col>
          </template>
        </div>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </div>
</template>

<script>
import WidgetFormItem from './WidgetFormItem'
import WidgetFormTable from './WidgetFormTable'
import WidgetFormGroup from './WidgetFormGroup'

export default {
  name: 'widget-form',
  components: { WidgetFormItem, WidgetFormTable, WidgetFormGroup },
  props: ['data', 'select', 'btndisabled'],
  data () {
    return {
      selectWidget: this.select,
      form: {}
    }
  },
  methods: {
    handleSelectWidget (index) {
      this.selectWidget = this.data.column[index]
    },
    close() {
      this.$emit('getModal', false)
    },
    dataFormSubmit() {
    }
  },
  watch: {
    select (val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.table-con {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.widget-form-list {
  /deep/.el-form-item__content {
    width: 100%;
    height: 100%;
  }
  /deep/.el-col {
    border: 1px solid #000;
    // border-top: 1px solid #000;
    margin-bottom: 0;
  }
   /deep/ .el-form-item__label{
    display: none;
  }
}
.form-designer .widget-form-container .el-form{
  height:calc(100% - 45px);
}
.dialog-footer{
  float:right;
}
</style>
